<template>
   <div class="article-lists">
    <el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true" label-width="120px">
                <el-form-item label="创建时间" class="piker">
					<el-date-picker
						v-model="queryParams.create_time"
						type="date"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						placeholder="请选择日期"
					/>
				</el-form-item>
                <el-form-item label="支付时间" class="piker">
					<el-date-picker
						v-model="queryParams.pay_time"
						type="date"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						placeholder="请选择日期"
					/>
				</el-form-item>
                <el-form-item label="支付方式">
                    <el-select class="w-[240px]" v-model="queryParams.pay_type">
                        <el-option label="全部" :value="0"/>
                        <el-option label="微信" :value="1"/>
                        <el-option label="支付宝" :value="2"/>
                        <el-option label="钱包" :value="4"/>
                        <el-option label="小程序" :value="5"/>
                    </el-select>
				</el-form-item>
                <el-form-item label="支付状态">
                    <el-select class="w-[240px]" v-model="queryParams.status">
                        <el-option label="全部" :value="0"/>
                        <el-option label="支付成功" :value="1"/>
                        <el-option label="已退款" :value="2"/>
                    </el-select>
				</el-form-item>
                <el-form-item label="分账状态">
                    <el-select class="w-[240px]" v-model="queryParams.is_separate">
                        <el-option label="全部" :value="0"/>
                        <el-option label="已分账" :value="1"/>
                        <el-option label="未分账" :value="2"/>
                    </el-select>
				</el-form-item>
                <el-form-item label="是否补贴">
                    <el-select class="w-[240px]" v-model="queryParams.subsidy_type">
                        <el-option label="全部" :value="0"/>
                        <el-option label="补贴" :value="1"/>
                        <el-option label="否" :value="2"/>
                    </el-select>
				</el-form-item>
				<el-form-item label="订单编号">
                    <el-input
                        class="w-[240px]"
                        v-model="queryParams.sn"
                        clearable
                    />
				</el-form-item>

				<el-form-item label="服务商名字">
                    <el-input
                        class="w-[240px]"
                        v-model="queryParams.server_name"
                        clearable
                    />
				</el-form-item>
				<el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
        <el-card class="!border-none" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号" type="index" :index="indexAdd" min-width="90" />
                <el-table-column label="订单编号" prop="sn" min-width="190" />
                <el-table-column label="创建时间" prop="create_time" min-width="190" />
                <el-table-column label="商品名称" prop="good_name" min-width="250" />
                <el-table-column label="商品类型" prop="good_type_name" min-width="190" />
                <el-table-column label="付款人" prop="userinfo.realname" min-width="190" />
                <el-table-column label="付款人手机" prop="userinfo.account" min-width="190" />
                <el-table-column label="购买数量" prop="userinfo.account" min-width="120">
                    <template #default="{ row }">
                        <div class="flex items-center">
                            <div class="pt-[5px]">✖️</div>
                            <span> {{ row.num }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="总金额（元）" prop="actual_money" min-width="190" />
                <el-table-column label="抵扣金额（元）" prop="deduction_price" min-width="190" >
                    <template #default="{ row }">
                        <span>{{ (Number(row.subsidy_money) + Number(row.deduction_price)).toFixed(2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="实际支付（元）" prop="real_money" min-width="190">
                    <template #default="{ row }">
                        <span>{{ (Number(row.real_money) + Number(row.use_money)).toFixed(2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付状态" prop="create_time" min-width="120">
                    <template #default="{ row }">
                        <span v-if="row.status == 1">支付成功</span>
                        <span v-if="row.status == 2">已退款</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付方式" prop="pay_type" min-width="120">
                    <template #default="{ row }">
                        <span v-if="row.pay_type == 1">微信</span>
                        <span v-if="row.pay_type == 2">支付宝</span>
                        <span v-if="row.pay_type == 4">钱包</span>
                        <span v-if="row.pay_type == 5">小程序</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付时间" prop="pay_time" min-width="190" />
                <el-table-column label="是否补贴（元）" prop="subsidy_money" min-width="140">
                    <template #default="{ row }">
                        <span v-if="row.subsidy_money > 0">{{ row.subsidy_money }}</span>
                        <span v-else>否</span>
                    </template>
                </el-table-column>
                <el-table-column label="分账状态" prop="is_separate" min-width="120" >
                    <template #default="{ row }">
                        <span v-if="row.is_separate == 1">已分账</span>
                        <span v-if="row.is_separate == 0">未分账</span>
                    </template>
                </el-table-column>
                <el-table-column label="分账收益" prop="separate_price" min-width="120" >
                     <template #default="{ row }">
                         <span v-if="row.is_separate == 1">{{ row.separate_price }}</span>
                         <span v-if="row.is_separate == 0">-</span>
                     </template>
                 </el-table-column>
                 <el-table-column label="收益状态" prop="is_withdraw" min-width="120" >
                     <template #default="{ row }">
                         <span v-if="row.is_withdraw == 1">已提现</span>
                         <span v-if="row.is_withdraw == 0">待提现</span>
                     </template>
                 </el-table-column>
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{ row }">
                        <el-button v-perms="['server.server/orderInfo']" type="primary" link >
							<router-link :to="{ path: getRoutePath('server.server/orderInfo'), query: { id: row.id } }" > 查看 </router-link>
						</el-button>
                        <el-button v-if="row.status == 1" v-perms="['server.server/backMoney']" type="danger" link @click="handleBack(row)">退款</el-button>
                        <el-button v-if="row.is_separate == 0 && row.status == 1" v-perms="['server.server/fenzhang']" type="success" link @click="handleFenzhang(row)">一键分账</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
        </el-card>
        <back_demand v-model:show="checkState.show" :value="checkState.value" @confirm="handleConfirmCheck"></back_demand>
    </div>
</template>
<script setup lang="ts">
import { orderList, backMoney,fenzhang } from '@/api/service';
import { usePaging } from '@/hooks/usePaging';
import {getRoutePath} from '@/router'
import feedback from '@/utils/feedback';
import back_demand from './back_demand.vue'
const checkState = reactive({
    show: false,
    value: '',
    status: ''
})

const route = useRoute()
const queryParams:any = reactive({
    status: 0,
    create_time: '',
    pay_time: '',
    pay_type: 0,
    subsidy_type: 0,
    is_separate: 0,
    sn: '',
    server_name: ''
})
// 切页序号变化
const indexAdd = (index: number) => {
    const page = pager.page // 当前页码
    const pagesize = pager.size // 每页条数
    return index + 1 + (page - 1) * pagesize
}
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: orderList,
    params: queryParams
})
if (route.query.sn) {
    queryParams.sn = route.query.sn
}
getLists()

// 退款
const handleBack = (row:any) => {
    checkState.show = true;
    checkState.value = row.id;
}
const handleConfirmCheck = async (value : any) => {
    console.log(value)
    await backMoney(value)
    checkState.show = false;
    getLists()
}
// 分账
const handleFenzhang = async (row:any) => {
    await feedback.confirm('是否确认分账','一键分账')
    await fenzhang({
        id: row.id
    })
    feedback.msgSuccess('分账成功')
    getLists()
}

</script>
<style lang="scss" scoped>
.piker{
    width: 360px;
	::v-deep .el-input__wrapper{
		width: 240px;
	}
}
</style>